<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
            <div class="search-item">
                <label>学生：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.userName"
                        clearable
                        placeholder="学生"
                    ></el-input>
                </div>
            </div>
            <!--            <div class="search-item">-->
            <!--                <label>学生：</label>-->
            <!--                <el-select-->
            <!--                    v-model="queryData.createdBy"-->
            <!--                    filterable-->
            <!--                    remote-->
            <!--                    reserve-keyword-->
            <!--                    placeholder="请输入关键词"-->
            <!--                    :remote-method="remoteMethod"-->
            <!--                    :loading="loading">-->
            <!--                    <el-option-->
            <!--                        v-for="item in options"-->
            <!--                        :key="item.id"-->
            <!--                        :label="item.name"-->
            <!--                        :value="item.id">-->
            <!--                    </el-option>-->
            <!--                    <div>-->
            <!--                        <el-pagination-->
            <!--                            background-->
            <!--                            small-->
            <!--                            :current-page.sync="stuData.currentPage"-->
            <!--                            :page-sizes="stuData.pageSizes"-->
            <!--                            :page-size.sync="stuData.pageSize"-->
            <!--                            layout=" total, prev, pager, next "-->
            <!--                            :total="stuData.total"-->
            <!--                        >-->
            <!--                        </el-pagination>-->
            <!--                    </div>-->
            <!--                </el-select>-->
            <!--            </div>-->
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                    >搜索</el-button
                >
            </div>
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
            >
                <el-table-column
                    prop="userName"
                    label="学生"
                    width="200"
                ></el-table-column>
                <el-table-column
                    prop="studentCode"
                    label="学号"
                    width="300"
                ></el-table-column>
                <el-table-column prop="status" label="状态" width="300">
                    <template slot-scope="scope">
                        {{ examStatus[scope.row.status] }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="result"
                    label="结果"
                    width="200"
                ></el-table-column>
                <el-table-column label="操作" min-width="300" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="primary"
                            size="mini"
                            :disabled="
                                scope.row.status !== 'submited' &&
                                    scope.row.status !== 'delaySubmited' &&
                                    scope.row.status !== 'corrected'
                            "
                            :loading="scope.row.opLoading"
                            @click="toDetailPage(scope.row)"
                            >详情
                        </el-button>
                        <el-button
                            :disabled="
                                scope.row.status !== 'submited' &&
                                    scope.row.status !== 'delaySubmited' &&
                                    scope.row.status !== 'corrected'
                            "
                            type="primary"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="toCorrectPage(scope.row)"
                            >批改
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
        <el-dialog
            v-if="paperRecordVisible"
            title="查看试卷"
            :visible.sync="paperRecordVisible"
            width="80%"
        >
            <paperRecordComponent
                :param-form="recordData"
                :is-detail="isDetail"
                @recordUpdateEvent="recordUpdate"
            ></paperRecordComponent>
        </el-dialog>
    </div>
</template>

<script>
import { TablePage } from "@/layout/mixin/iVue.js";
import { mapState } from "vuex";
import paperRecordComponent from "@/views/models/exam/component/paperRecordComponent";
import { fetchUserPage } from "@/api/user.js";
import { fetchQuestionByPaper } from "@/api/exam";
import { beanCopy } from "@/utils";
export default {
    name: "PaperRecord",
    components: { paperRecordComponent },
    mixins: [TablePage],
    data() {
        return {
            queryData: {
                createdBy: ""
            },
            loading: false,
            stuData: {
                name: "",
                pageSizes: [10, 20, 30, 50, 100, 200],
                currentPage: 1,
                total: 0,
                pageSize: 10
            },
            options: [],
            paperRecordVisible: false,
            isDetail: true,
            recordData: {},
            question: {},
            questions: []
        };
    },
    computed: {
        ...mapState({
            examStatus: state => state.status.examStatus
        })
    },
    watch: {
        "stuData.currentPage"(currentPage) {
            this.searchStu();
        },
        "stuData.pageSize"(pageSize) {
            if (pageSize === 99999999) {
                return;
            }
            if (this.stuData.currentPage === 1) {
                this.searchStu();
            } else {
                this.stuData.currentPage = 1;
            }
        },
        $route: function(to, from) {
            // 拿到目标参数 to.query.id 去再次请求数据接口
            if (this.$route.params.examId) {
                this.search();
            }
        }
    },
    mounted() {},
    methods: {
        search(queryData) {
            this.queryData.paperType = this.$route.query.paperType;
            this.queryData.examId = this.$route.query.examId;
            this.loadTable("/exam/record/page", queryData);
            this.searchStu();
        },
        searchStu() {
            this.loading = true;
            fetchUserPage(
                {
                    current: this.stuData.currentPage,
                    size: this.stuData.pageSize,
                    pageSize: this.stuData.pageSize,
                    pageCurrent: this.stuData.currentPage,
                    name: this.stuData.name
                },
                "查询学生信息异常"
            ).then(res => {
                this.options = res.records;
                this.stuData.total = res.total || 0;
                this.stuData.currentPage = res.current || res.currentPage || 1;
                this.stuData.pageSize = res.size || res.pageSize || 10;
                this.loading = false;
            });
        },
        toDetailPage(data) {
            fetchQuestionByPaper(
                { id: data.paperId, paperType: data.paperType },
                "试题集合查询异常"
            ).then(res => {
                this.dataChange(data, res);
                this.paperRecordVisible = true;
                this.isDetail = true;
            });
        },
        dataChange(data, res) {
            this.questions = res;
            // this.questionDataList = this.dataForm.content;
            this.recordData = {};
            beanCopy(data, this.recordData, true);
            this.recordData.content.forEach(item => {
                item.questions.forEach(ll => {
                    this.getQuestionByid(ll.id);
                    ll.score = this.question.score;
                    let Obj = {};
                    beanCopy(this.question, Obj, true);
                    ll.question = Obj;
                });
            });
        },
        getQuestionByid(id) {
            this.question = {};
            let obj = {};
            this.questions.forEach(item => {
                if (id === item.id) {
                    beanCopy(item, obj, true);
                    this.question = obj;
                    return;
                }
            });
        },
        toCorrectPage(data) {
            fetchQuestionByPaper(
                { id: data.paperId, paperType: data.paperType },
                "试题集合查询异常"
            ).then(res => {
                this.dataChange(data, res);
                this.paperRecordVisible = true;
                this.isDetail = false;
            });
        },
        recordUpdate(value) {
            this.paperRecordVisible = false;
            if (value) {
                this.search();
            }
        },
        remoteMethod(query) {
            this.stuData.name = query;
            this.stuData.currentPage = 1;
            this.searchStu();
        }
    }
};
</script>

<style lang="scss" scoped></style>
